<template>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>选择</th>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in cartStore.cartItems" :key="item.id">
          <td>
            <el-checkbox v-model="item.isChecked" size="large" />
          </td>
          <td>{{ item.name }}</td>
          <td>￥{{ item.price }}</td>
          <td>
            <el-input-number
              v-model="item.quantity"
              :min="1"
              :max="10"
              @change="handleChange"
            />
          </td>
          <td class="subtotal">￥{{ item.quantity * item.price }}</td>
          <td>
            <el-button type="primary" @click="removeItem(item.id)"
              >删除</el-button
            >
          </td>
        </tr>
      </tbody>
    </table>
    <el-text class="mx-1" type="primary"
      >已选<el-text class="mx-1">
        &nbsp;{{ cartStore.totalQuantity }}&nbsp;</el-text
      >个商品，总价：<el-text class="mx-1">{{ cartStore.totalPrice }}</el-text
      >&nbsp;元 </el-text
    ><br />
  </div>
</template>

<script setup>
import { ElButton } from "element-plus";
import { useCartStore } from "@/stores/cartStore";
const cartStore = useCartStore();
const handleChange = (value) => {
  console.log(value);
};
// 删除商品
const removeItem = (itemId) => {
  cartStore.removeItem(itemId);
};
</script>

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #909596;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #82b3fb;
}
tr:hover {
  background-color: #f5f5f5;
}
</style>
